<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <title>首页</title>
    {include file='commonjs'}
</head>

<body class="page index">

    <!-- c-nav 开始 -->
    {include file='common_head'}
    <!-- c-nav 结束 -->

    <!-- index_banner 开始 -->
    <div class="index_banner">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="/static/index/img/page/index/banner1.png">
                </div>
                <div class="swiper-slide">
                    <img src="/static/index/img/page/index/banner2.png">
                </div>
                <div class="swiper-slide">
                    <img src="/static/index/img/page/index/banner3.png">
                </div>
            </div>
            <div class="pagination"></div>
        </div>
        <div class="series">
            <ul class="series-list clearfix">
                <li class="series-list-item oStyle act">
                    <a href="javascript:">矿泉直饮系列</a>
                </li>
                <li class="series-list-item oStyle">
                    <a href="javascript:">RO逆渗透纯水系列</a>
                </li>
                <li class="series-list-item oStyle">
                    <a href="javascript:">集成供水系列</a>
                </li>
                <li class="series-list-item oStyle">
                    <a href="javascript:">空气净化器系列</a>
                </li>
            </ul>
        </div>
        <div class="submenu">
            <div class="sub_box clearfix">
                <div class="submenu-search clearfix">
                    <div class="submenu-search-input">
                        <form>
                            <input name="search" type="text">
                            <input type="submit" value="" style="background-image: url('/static/index/img/page/index/icon1.png')">
                        </form>
                    </div>
                    <div class="submenu-search-hot">
                        <p>
                            <span class="hot_name">热门搜索：</span>
                            <a href="javascript:">淋浴美肤净水器</a>
                            <a href="javascript:">车载空气净化器</a>
                            <a href="javascript:">家用水龙头净水器</a>
                            <a href="javascript:">家用水龙头净水器</a>
                        </p>
                    </div>
                </div>
                <div class="submenu-phone"">
                    <p>
                        <span class="submenu-phone-name">服务热线：</span>
                        <span class="submenu-phone-num">0731-88312891</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- index_banner 结束 -->

    <!-- index_main 开始 -->
    <div class="index_main">
        <section class="product">
            <div class="product-top">
                <div class="i_title">
                    <p>Product center</p>
                    <p>产品中心</p>
                </div>
                <ul class="product-top-menu clearfix">
                    <li class="pr_item">
                        <a href="javascript:" class="pr_item-active" data-id="1">RO逆渗透纯水系列</a>
                    </li>
                    <li class="pr_item">
                        <a href="javascript:" data-id="2">矿泉直饮系列</a>
                    </li>
                    <li class="pr_item">
                        <a href="javascript:" data-id="3">集成供水系列</a>
                    </li>
                    <li class="pr_item">
                        <a href="javascript:" data-id="4">空气净化器系列</a>
                    </li>
                </ul>
            </div>
            <ul class="product-list PB-65 clearfix" id="prList">
                <!--<li class="product-list-item">
                    <div class="pr_pic">
                        <img src="img/page/index/pic1.png">
                    </div>
                    <div class="pr_txt">
                        <p class="pr_txt-name">H-104 双联</p>
                        <p>双倍银离子杀菌</p>
                        <a href="javascript:" class="i_but"> MORE> </a>
                    </div>
                </li>-->
            </ul>
            <div class="i_more">
                <a href="javascript:"> MORE> </a>
            </div>
        </section>
        <section class="intro MT-65 clearfix">
            <div class="intro_box">
                <div class="intro-pic" style="background-image: url('/static/index/img/page/index/intro_bg.png')">
                    <div class="intro-pic-max">
                        <img src="/static/index/img/page/index/intro_pic1.png">
                    </div>
                    <div class="intro-pic-min">
                        <img src="/static/index/img/page/index/intro_pic2.png">
                    </div>
                </div>
                <div class="intro-details">
                    <div class="intro-details-name">
                        <span class="details_line"></span>
                        <span>长沙市某某电器有限公司</span>
                    </div>
                    <div class="intro-details-text PT-30">
                        <p class="in_title PB-20">公司简介</p>
                        <div class="in_text">
                            <p>长沙某某电器有限公司（原常州市双赢电器厂）位于常州市春江镇魏村沿江
                                东路82号，交通便捷，通讯方便，地理条件优越。</p>
                            <p>长沙某某电器有限公司主要生产汽车灯具，电动车配套产品和大功率电动车
                                控制器等。汽车灯具在国内设立多家办事处，现已拥有先进的生产流水线和检验
                                设备。</p>
                            <p>某某电器生产的电动车配套产品主要有电动车射灯、电动车配件、电动自行
                                车控制器、充电器、转换器、助力传感器等。松正电器在国内配套用户中享有良
                                好的声誉和信誉。现已与天津邦德、阿米尼、大安等多家知名企业形成配套，并
                                建立了稳定良好的合作关系。在同行业中处于领先水平，部分产品已远销美国、
                                东南亚等地区。</p>
                            <p>
                                为适应未来国内电动车行业的发展需要，加快常州松正电器有限公司全方位
                                的发展，本公司将进一步开拓国内、国际市场，公司与多所大专院校研究所建立
                                合作关系...
                            </p>
                        </div>
                        <div class="in_more">
                            <a href="javascript:"> MORE> </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="referral PB-40">
            <div class="i_title">
                <p>ACTIVATED CARBON</p>
                <p>天然椰壳活性炭</p>
            </div>
            <div class="referral-content clearfix">
                <div class="referral-content-referral">
                    <div class="re_pic">
                        <img src="/static/index/img/page/index/acr_pic1.png" alt="">
                    </div>
                    <div class="re_refer">
                        <P>改善口感 即开即饮</P>
                    </div>
                    <p class="re_text">
                        功能：强力去除三氯甲烷等有机物，性能比较普通型号更加突出！
                        特含抑菌介质，有效抑制菌滋长，减少挥发性有机化合（voc）
                        附铅能力符合美国环境和卫生部标准
                    </p>
                    <p class="re_more">
                        <a href="javascript:"> MORE> </a>
                    </p>
                </div>
                <div class="referral-content-pic">
                    <img src="/static/index/img/page/index/acr_pic2.png" alt="">
                </div>
            </div>
        </section>
        <section class="news PB-40">
            <div class="i_title">
                <p>NEWS CENTER</p>
                <p>新闻中心</p>
            </div>
            <ul class="news-list clearfix" id="newsList">
                <!--<li class="news-list-item clearfix">
                    <div class="news_pic">
                        <a href="javascript:">
                            <img src="img/page/index/news_pic.png">
                        </a>
                    </div>
                    <div class="news_details">
                        <a href="javascript:">
                            <p class="news_details-title">
                                不及时更换净水器滤芯，将造成饮水二次污染
                            </p>
                            <p class="news_details-text">
                                随着生活水平的提高，人们对于饮用水的要求也苞来越高，
                                净水器开始走入家庭生活。人们晋遍认为，使净水能化水
                                质．保证饮水安全，但家里一定需要安装净水器吗？
                            </p>
                        </a>
                    </div>
                </li>-->
            </ul>
            <div class="i_more">
                <a href="javascript:"> MORE> </a>
            </div>
        </section>
    </div>
    <!-- index_main 结束 -->

    <!-- c-footer 开始 -->
    {include file='common_footer'}
    <!-- c-footer 结束 -->

    <!-- 产品中心模板 -->
    <script type="text/x-handlebars-template" id="prTemp">
        <% _.each(prData, function(item) { %>
            <li class="product-list-item">
                <div class="pr_pic">
                    <img class="lazy" data-original="<%= item.pic %>">
                </div>
                <div class="pr_txt">
                    <p class="pr_txt-name"><%= item.name %></p>
                    <p><%= item.text %></p>
                    <a href="<%= item.href %>" class="i_but"> MORE> </a>
                </div>
            </li>
        <% }) %>
    </script>

    <!-- 新闻中心模板 -->
    <script type="text/x-handlebars-template" id="newsTemp">
        <% _.each(newsData, function(item) { %>
            <li class="news-list-item clearfix">
                <div class="news_pic">
                    <a href="<%= item.href %>">
                        <img class="lazy" data-original="<%= item.pic %>">
                    </a>
                </div>
                <div class="news_details">
                    <a href="javascript:">
                        <p class="news_details-title">
                            <%= item.title %>
                        </p>
                        <p class="news_details-text">
                            <%= item.text %>
                        </p>
                    </a>
                </div>
            </li>
        <% }) %>
    </script>

    <script>
        require(['jquery', 'swiper2', 'lodash', 'SMV', 'layer', 'lazyload'], function($, Swiper, _, SMV, layer, lazyload) {

            var obj = {};
            //  style
            var sele = $(".oStyle");
            for (var i = 0; i < sele.length; i++) {
                sele.eq(i).attr("data-id", i+1);
            }
            obj.style = parseInt($(".act").attr("data-id"));
            sele.click(function () {
                $(this).addClass("act").siblings().removeClass("act");
                obj.style = parseInt($(".act").attr("data-id"));
                $.post("",obj);
            });

            // nav
            $(window).scroll( function() {
                var t = $(document).scrollTop();
                if (t > 0) {
                    $(".c-nav").addClass("c_nav-scroll");
                }else {
                    $(".c-nav").removeClass("c_nav-scroll");
                }
            });

            // banner
            var mySwiper = new Swiper('.swiper-container',{
                autoplay : 4000,
                loop : true,
                pagination : '.pagination',
                paginationClickable :true
            });

            // 产品
            var prClass = {
                oClass: $(".pr_item-active").attr("data-id")
            }, prTtem = $(".pr_item");
            $.post("", prClass);
            prTtem.click(function () {
                console.log($(this).index());
            }).on("click", "a", function () {
                $(this).addClass("pr_item-active");
                $(this).parent().siblings().children().removeClass("pr_item-active");
                prClass.oClass = $(".pr_item-active").attr("data-id");
                $.post("", prClass);
            });

            var prTemp = _.template($("#prTemp").html());
            $.get("http://www.easy-mock.com/mock/59ca0a81e0dc663341bb5fc2/appliance/dataList" ,function (res) {
                $("#prList").append(prTemp({prData: res.data}));
                var timeout = setTimeout(function() {
                    $("img.lazy").trigger("sporty")
                }, 5000);
            });

            // 新闻
            var newsTemp = _.template($("#newsTemp").html());
            $.get("http://www.easy-mock.com/mock/59ca0a81e0dc663341bb5fc2/appliance/iNews" ,function (res) {
                $("#newsList").append(newsTemp({newsData: res.data}));
                $("img.lazy").lazyload({
                    effect : "fadeIn"
                });
            });

            // 留言
            new SMV('form', {
                rules: {
                    onlyPhone:[/^1[34578]\d{9}$/,"手机号码格式有误"]
                },
                fields: {
                    name: {
                        required: "姓名未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#name');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    phone: {
                        required: "号码未填写",
                        failHtml: false,
                        rule: "required|disblur|onlyPhone",
                        fail: function (messages) {
                            layer.tips(messages, '#phone');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    corp: {
                        required: "公司未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#corp');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    idea: {
                        required: "意见未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#idea');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    }
                },
                short: true,
                submit: function(valid, form) {
                    if(valid) {
                        form.submit();
                    }
                }
            })
        })
    </script>
</body>

</html>